<template>
<div class="bh-message-box__wrapper" v-show="visible">
	<div class="bh-message-box">
		<div class="bh-message-box__header">
			<div class="bh-message-box__title">{{title}}</div>
			<button class="bh-message-box__headerbtn" @click="handleAction('cancel')">
				<bh-icon class="bh-message-box__close" name="close"></bh-icon>
			</button>
		</div>
		<div class="bh-message-box__content">
			<div class="bh-message-box__container">
				<div class="bh-message-box__message">{{message}}</div>
			</div>
			<div class="bh-message-box__input" v-if="type_a == 'prompt'">
				<bh-input v-model="inputValue"></bh-input>
			</div>
		</div>
		<div class="bh-message-box__btns">
			<bh-button @click="handleAction('cancel')" v-if='showCancelButton'>{{cancelButtonText}}</bh-button>
			<bh-button type="primary" @click="handleAction('confirm')" v-if='showConfirmButton'>{{confirmButtonText}}</bh-button>
		</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'bh-message-box',
	props: {
	},
	data() {
		return {
			type: 'info',
			type_a: '',
			title: '提示',
			message: '',
			confirmButtonText: 'ok',
			cancelButtonText: 'cancel',

			inputValue: '',

			showCancelButton: false,
			showConfirmButton: true,
			
			duration: 3000,
			timer: null,
			closed: false,

			action: null,

			visible: false,
		}
	},
	methods: {
		handleAfterLeave() {
			this.$destroy(true);
			this.$el.parentNode.removeChild(this.$el);
		},
		doClose() {
			this.visible = false;
			this.handleAfterLeave();
			setTimeout(() => {
				if (this.action) {
					this.callback && this.callback(this.action, this);
				}
				//临时使用
				if(this.type_a == 'confirm') {
					this.resolve && this.action == 'confirm' && this.resolve(this.action, this);
					this.reject && this.action == 'cancel' && this.reject(this.action, this);
				}
				if(this.type_a == 'prompt') {
					this.resolve && this.action == 'confirm' && this.resolve(this.action, this.inputValue);
					this.reject && this.action == 'cancel' && this.reject(this.action, this.inputValue);
				}
			});
		},
		handleAction(action) {
			this.action = action;
			this.doClose();
		},
		show() {
			this.visible = true;
		},
	},
	computed: {
		typeClass() {
			return `bh-message-box--${ this.type }`;
		},
	},
	mounted() {
		this.show();
    },
}
</script>
